<template>
	<view
		class="goods-item"
		:class="`goods-item-column${column}`"
		@click="goGoods">
		<view class="goods-item-img">
			<view class="goods-item-img-box">
				<view class="goods-item-img-box-url">
					<lazy-load
						:image="imgUrl(goods.seckillImage ? goods.seckillImage : goods.sellImage)"
						loading-img="/static/images/loading.png"
						error-img="/static/images/error.png"
						img-mode="aspectFill">
					</lazy-load>
				</view>
			</view>
			<view class="goods-item-trailer text_line1" v-if="goods?.seckillNotice && mode === 2">{{goods.seckillNotice}}</view>
		</view>
		<view class="goods-item-info2 main-flex" v-if="mode === 2">
			<image class="goods-item-info2-icon" mode="heightFix" src="/static/images/seckill_icon.png"></image>
			<big-price :fontSize="20" :integerSize="28" :decimalSize="20" :price="moneyStr(goods.seckillPrice)"></big-price>
		</view>
		<view class="goods-item-info" v-else>
			<view class="goods-item-name text_line2" v-if="goods.productName">{{goods.productName}}</view>
			<view class="goods-item-info-trailer main-flex" v-if="goods?.seckillNotice">
				<view class="goods-item-info-trailer-text">{{goods.seckillNotice}}</view>
			</view>
			<view class="goods-item-btn main-flex" :class="`goods-item-btn${goods.status}`">
				<view class="goods-item-btn-l main-flex-item main-flex">
					<view class="goods-item-price main-flex" v-if="goods.status === 4">
						<image class="goods-item-price-icon" mode="heightFix" src="/static/images/seckill_icon.png"></image>
						<big-price :price="moneyStr(goods.seckillPrice)"></big-price>
					</view>
					<view class="goods-item-old main-flex" v-else>
						<image class="goods-item-price-icon" mode="heightFix" src="/static/images/sales_icon.png"></image>
						:<big-price :price="moneyStr(goods.sellPrice)"></big-price>
					</view>
				</view>
				<view class="goods-item-btn-text" v-if="goods.status < 4">即将开始</view>
				<view class="goods-item-btn-text" v-if="goods.status === 4" @click.stop="openGoods">立即抢购</view>
				<view class="goods-item-btn-text" v-if="goods.status === 5">秒杀结束</view>
			</view>
		</view>
	</view>
</template>

<script setup>
  /**
   * GoodsItem 首页商品
   * @description 首页商品
   * @property {Object} goods 商品信息
   * @event {Function} chooseGoods 点击+
   */
	import { computed, onMounted, ref, watch } from "vue"
	import { timestampNum } from '@/utils/ty.js'
	
	const props = defineProps({
		goods: {
			type: Object,
			default: {}
		},
		mode: {
			type: Number, // 1. 正常模式 2.极简模式
			default: 1
		},
		column: {
			type: [Number, String],
			default: 3
		},
	})
	
	const emits = defineEmits(['chooseGoods'])
	
	const openGoods = (item) => {
		if (props.goods.status === 4) {
			emits('chooseGoods', props.goods)
		}
	}
	
	// 商品详情
	const goGoods = () => {
		if (props.mode === 2) return false
		uni.navigateTo({
			url: `/pages/goods/index?id=${props.goods.productId}`
		})
	}
	
	const timeData = ref({})
	const onChangeTimeData = (e) => {
		timeData.value = e
	}
	
	const seckillStartTime = computed(() => {
		const startTimestamp = timestampNum(props.goods.startTime)
		const nowTimestamp = timestampNum()
		return startTimestamp - nowTimestamp
	})
	
</script>

<style lang="scss" scoped>
  .goods-item {
		width: 100%;
		overflow: hidden;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
		&-img {
			position: relative;
			width: 100%;
			&-box {
				position: relative;
				top: 0;
				left: 0;
				padding-bottom: 100%;
				&-url {
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}
		}
		&-trailer {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: rgba(227, 35, 14, .7);
			color: #ffffff;
			text-align: center;
			font-size: 20rpx;
			line-height: 32rpx;
			z-index: 2;
		}
		&-status {
			position: absolute;
			width: 120rpx;
			height: 48rpx;
			background-color: rgba(0, 0, 0, .2);
			top: 50%;
			left: 50%;
			margin-top: -18rpx;
			margin-left: -60rpx;
			font-size: 28rpx;
			font-weight: 600;
			padding: 0rpx 20rpx;
			line-height: 48rpx;
			border-radius: 24rpx;
			text-align: center;
			color: #ffffff;
		}
		&-info {
			padding: 12rpx;
			&-trailer {
				&-text {
					background: linear-gradient(to right, #e3230e, #FFA07A) no-repeat;
					color: #ffffff;
					font-size: 24rpx;
					line-height: 36rpx;
					padding: 0 20rpx;
					border-radius: 10rpx;
				}
			}
		}
		&-info2 {
			padding: 10rpx;
			background-color: #fc7502;
			font-size: 20rpx;
			color: #ffffff;
			justify-content: center;
			align-items: flex-end;
			&-icon {
				height: 30rpx;
			}
		}
		&-name {
			font-size: 28rpx;
			font-weight: 600;
		}
		&-market {
			font-size: 20rpx;
			color: $text-light;
			margin-top: 10rpx;
		}
		&-old {
			align-items: flex-end;
		}
		&-btn {
			height: 60rpx;
			background-color: #FAD0C4;
			border-radius: 10rpx;
			color: #ffffff;
			box-sizing: border-box;
			&-l {
				height: 100%;
				-webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
				clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
				background-color: #FF0000;
				border-radius: 10rpx 0 0 10rpx;
				padding-left: 20rpx;
			}
			&-text {
				padding: 0 20rpx;
				box-sizing: border-box;
				font-size: 24rpx;
			}
		}
		&-old {
			font-size: 24rpx;
		}
		&-price {
			font-size: 32rpx;
			&-icon {
				height: 40rpx;
			}
		}
		&-unit {
			color: $text-light;
			font-size: 20rpx;
		}
		&-column1 {
			height: 200rpx;
			display: flex;
			align-items: flex-start;
			.goods-item-img {
				width: 200rpx;
			}
			.goods-item-info {
				height: 100%;
				display: flex;
				flex-direction: column;
				flex: 1;
				overflow: hidden;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 10rpx;
			}
		}
		&-column3 {
			.goods-item-name {
				font-size: 24rpx;
			}
		}
	}
	.goods-item-btn4 {
		background-color: #fc7502;
	}
	.goods-item-btn5 {
		background-color: #696969;
	}
</style>
